<template>
  <!-- 多选框 -->
  <el-checkbox-group v-if="tagType === 'checkbox'" :value="arrayValue" :disabled="disabled">
    <el-checkbox v-for="(item,key) in dictOptions" :key="key" :label="item.dictValue" @change="handleChange($event,item.dictValue)">
      {{ item.dictLabel }}
    </el-checkbox>
  </el-checkbox-group>

  <!-- 按钮样式多选框 -->
  <el-checkbox-group v-else-if="tagType === 'checkboxButton'" :value="arrayValue" :disabled="disabled">
    <el-checkbox-button v-for="(item,key) in dictOptions" :key="key" :label="item.dictValue" @change="handleChange($event,item.dictValue)">
      {{ item.dictLabel }}
    </el-checkbox-button>
  </el-checkbox-group>

  <!-- 多选选择器 -->
  <el-select v-else-if="tagType === 'multiSelect'" :value="arrayValue" :filterable="filterable" multiple clearable style="width:100%" :placeholder="placeholder" :disabled="disabled" :collapse-tags="collapseTags" @change="handleChange">
    <el-option v-for="item in dictOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
  </el-select>
</template>

<script>
export default {
  name: 'SelectMultiTag',
  props: {
    value: {
      type: String,
      default: ''
    },
    // 字典编码
    dictCode: {
      required: true,
      type: String,
      default: ''
    },
    // 类型 multiSelect 多选选择器 checkbox 多选框 checkboxButton 按钮样式多选框
    type: {
      type: String,
      default: 'multiSelect'
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    triggerChange: {
      type: Boolean,
      default: false
    },
    // 是否开启搜索 | type = multiSelect 有效
    filterable: {
      type: Boolean,
      default: false
    },
    // 折叠多选
    collapseTags: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      dictOptions: [],
      // 初始化数值
      arrayValue: []
    }
  },
  computed: {
    getValueArray() {
      return this.value != null ? this.value.split(',') : []
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        this.arrayValue = !val ? [] : this.value.split(',')
      }
    },
    dictCode: {
      immediate: true,
      handler() {
        this.initDictData()
      }
    }
  },
  created() {
    this.tagType = this.type
  },
  methods: {
    // 根据字典编码，初始化字典数组
    initDictData() {
      this.getDicts(this.dictCode).then((response) => {
        this.dictOptions = response.data
      })
    },
    handleChange(e, value) {
      let val = this.arrayValue
      if (this.tagType.indexOf('checkbox') !== -1) {
        // 这里的e是checkbox是否选中的状态 true 选中 false 未选中
        // if true 选中 if false 再次点击取消选中
        if (e) {
          val.push(value)
        } else {
          for (let i = 0; i < val.length; i++) {
            if (val[i] === value) {
              val.splice(i, 1)
            }
          }
        }
      } else {
        val = e
      }
      if (this.triggerChange) {
        this.$emit('change', val)
        return
      }
      this.$emit('input', !val ? '' : val.join(','))
    }
  }
}
</script>
